<!-- 带复选框的表格  index列 复选框 编辑删除按钮 都可动态删去-->
<template>
  <div class="checkbox-table">
    <el-table
      style="width: 100%"
      :style="{height: height}"
      :max-height="maxHeight"
      :cell-style="setCellStyle"
      :data="tableData"
      class="checkbox-table"
      :stripe="true"
      @selection-change="selectChange"
      @cell-click="cellClick"
    >
      <el-table-column type="selection" v-if="isAction && isDelete"></el-table-column>
      <el-table-column type="index" width="50" label=" " :index="setTableIndex"></el-table-column>
      <el-table-column
        v-for="(item, index) in tableHeaderData"
        :key="index"
        :label="item.name"
        :property="item.property"
        :align="align"
      ></el-table-column>
      <el-table-column label="操作" width="150" v-if="isAction">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click.native.prevent="editBtnClick(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click.native.prevent="deleteBtnClick(scope.row)" v-if="isDelete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "checkbox-table",
  props: {
    maxHeight: {
      type: [String, Number],
      default: 700
    },
    tableData: {
      type: Array,
      default: () => []
    },
    tableHeaderData: {
      type: Array,
      default: () => []
    },
    height: {
      type: String,
      default: ''
    },
    startIndex: {
      type: [Number, String],
      default: 0
    },
    isAction: {
      type: Boolean,
      default: true
    },
    isDelete: {
      type: Boolean,
      default: true
    },
    align: {
      type: String,
      default: 'left'
    }
  },
  data() {
    return {};
  },
  computed: {
  },
  created() {},
  methods: {
    setCellStyle(params) {
      this.$emit('setStyle', params)
    },
    editBtnClick(row) {
      this.$emit('editBtnClick', row)
    },
    deleteBtnClick(row) {
      this.$emit('deleteBtnClick', row)
    },
    selectChange(selection) {
      this.$emit('selectionChange', selection)
    },
    setTableIndex(index) {
      return this.startIndex + index + 1
    },
    cellClick(row, column, cell) {
      this.$emit('cellClick',row, column, cell)
    }
  }
};
</script>
<style lang='scss'>
.checkbox-table {
  .el-table {
    .cell {
      width: 100%!important;
    }
  }
}
.el-tooltip__popper {
  max-width: 600px;
}
</style>